<template>
    <div>
        <!-- ElementUI:对话框 -->
        <el-dialog title="设备设置" width="800px" :visible.sync="obj.isshow" @close="closedev()">
            <!-- <div slot="footer" class="dialog-footer">
                
            </div> -->
            <p style="margin-bottom: 20px;font-size:12px">说明：点击灯图标可控制单个灯开关,按钮不可用代表设备离线,请勿操作。</p>
            <div style="margin-bottom: 20px;">
                <el-button size="mini" :disabled="this.devobj.status ? false : true" type="primary" @click="allon">全开</el-button>
                <el-button size="mini" :disabled="this.devobj.status ? false : true" type="primary" @click="alloff">全关</el-button>
                <el-button v-if="loadname.length > 0" size="mini" @click="setloadname()" type="primary">名称确认修改</el-button>
                <el-button v-else size="mini" @click="addloop()" type="primary">新增回路</el-button>

            </div>
            <div  style="display: flex;width: 800px;height:300px;flex-wrap: wrap;line-height">
                <div  v-for="(item,num) in loadname" :key="num"  style="width: 180px;height:50px;">
                    <span style="line-height: 50px;">{{ num+1 }}:</span>
                    <i @click="controldev(item.switchStatus,num)" v-if="item.switchStatus == '1'" class="el-icon-s-opportunity" style="font-size: 30px;color:#ff8800"></i>
                    <i @click="controldev(item.switchStatus,num)" v-else class="el-icon-s-opportunity" style="font-size: 30px;color:#999"></i>
                   
                    <el-input
                        type="text"
                        placeholder="请输入名称"
                        v-model="item.name"
                        maxlength="8"
                        show-word-limit
                        >
                    </el-input>
                </div>
               
            </div>
            <!-- <div>{{ obj }}</div> -->
            <!-- <div slot="footer" class="dialog-footer">
                <el-button @click="obj.isshow = false;">取消</el-button>
                <template>
                    <el-button v-if="curId" type="primary" @click="editRoleOne(curId)">修改</el-button>
                    <el-button v-else type="primary" @click="menuAddOne">添加</el-button>
                </template>
            </div> -->
        </el-dialog>
    </div>
</template>
  
<script>
import { number } from "echarts";
import {addloopname,setloadname,getloadname,getdevid,setdev } from "../../../request/api";
import { successmsg, failmsg } from "../../../tools/tools";
import json_parse from "json-bigint/lib/parse";

export default {
  props:['obj','devid','timers','device'],
    data() {
        return {
            loadname:[],
            dobj:{
                centralizedCode: "",
                code: 1,
                switchStatus: true,
                loopList: []
            },
            devobj:{},
            devlist:[],
            value: '',
            curId: '',
        };
    },
    created() {
        this.curId = this.$parent.devid;
    },
    methods: {
        // 新增回路名字
        addloop(){
            this.curId = this.devid
            addloopname({deviceId:this.curId}).then(d=>{
                setTimeout(()=>{
                        this.getlist(this.devobj.id)
                    },1000)
                    successmsg(d.message)
            })
        },
        // 名字
        setloadname(){
            setloadname(this.loadname).then(d=>{
                // console.log(this.loadname);
                

            })
        },
        closedev(){
            this.$emit('closetime')
            this.$emit('refreshdev')
            // clearInterval(timers)
        },
        alloff(){
            this.dobj.centralizedCode = this.devobj.centralizedCode
            this.dobj.code = this.devobj.code
            this.dobj.switchStatus = 0
            if(this.devobj.type == 8){
                this.dobj.loopList = [1,2,3,4,5,6,7,8]
            }
            if(this.devobj.type == 12){
                this.dobj.loopList = [1,2,3,4,5,6,7,8,9,10,11,12]
            }
            setdev(this.dobj).then(d=>{
                if(d.code == '0000'){
                    successmsg(d.message)
                    this.$emit('refreshdev')
                    setTimeout(()=>{
                        this.getlist(this.devobj.id)
                    },2000)
                    
                }
            })
           
        },
        allon(){
            this.dobj.centralizedCode = this.devobj.centralizedCode
            this.dobj.code = this.devobj.code
            this.dobj.switchStatus = 1
            if(this.devobj.type == 8){
                this.dobj.loopList = [1,2,3,4,5,6,7,8]
            }
            if(this.devobj.type == 12){
                this.dobj.loopList = [1,2,3,4,5,6,7,8,9,10,11,12]
            }
            setdev(this.dobj).then(d=>{
                if(d.code == '0000'){
                    this.$emit('refreshdev')
                    successmsg(d.message)
                    setTimeout(()=>{
                        this.getlist(this.devobj.id)
                    },2000)
                }   
            })
        },
        // 控制设备
        controldev(item,num){
            this.dobj.centralizedCode = this.devobj.centralizedCode
            this.dobj.code = this.devobj.code
            this.dobj.switchStatus = !Number(item)
            let nums = num+1
            this.dobj.loopList = [nums]
            setdev(this.dobj).then(d=>{
                if(d.code == '0000'){
                    successmsg(d.message)
                    this.$emit('refreshdev')
                    setTimeout(()=>{
                        this.getlist(this.devobj.id)
                    },2000)
                }
                // console.log(d);
            })
        },
        getlist(num){
            getdevid({id:num}).then(d=>{
                if(d.code == '0000'){
                    // console.log(d,'22');
                    this.devobj = d.data
                    let str = d.data.switchStatus
                    this.devlist =Array.from(str)
                    // console.log( this.devlist,"999999");
                    getloadname({id:num}).then(d=>{
                        this.loadname = d.data
                        this.loadname.forEach((value, index) => {
                            value['switchStatus'] = this.devlist[index];

                            })
                        // console.log( this.loadname,"999999");
                    
                })
                }
            })

           
           
        }
    },

    mounted() {
        // this.curId = this.devid
        // console.log(this.curId,'222');
        // this.getAllMenu();
        // console.log(this.formInfo, 123123);
    },
    watch: {
      device() {
        if (this.devobj.id === this.device.id) {
          const switchList = this.device.switchList;
          this.devlist = switchList.map(item => (item.switchStatus ? "1" : "0"));
        }
      }
    },
}
</script>
  
<style></style>